<template>
    <div>
        <el-form @submit.native.prevent ref="editForm" :model="formFileds">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item>
                        <el-input v-model="formFileds.text" prefix-icon="el-icon-search" placeholder="搜索用户名或手机号">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="get()">查询
                        </el-button>
                    </el-form-item>
                </el-col>
                
                

            </el-row>
        </el-form>

        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border highlight-current-row
            :default-sort="{ prop: 'date', order: 'descending' }" @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            @selection-change="handleSelectionChange" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column property="userName" label="用户名">
            </el-table-column>
            <el-table-column property="userPhone" label="用户手机号">
            </el-table-column>
            <el-table-column property="createTime" label="时间">
            </el-table-column>
            <el-table-column property="uri" label="操作内容">
            </el-table-column>
            <el-table-column property="result" label="操作结果">
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="pageSize" :total="total"
        @current-change="currentChange"
      @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 弹出层 -->

    </div>
</template>

<script>
import {
    getLog
} from "@/api/systemManage/sysLogManage";

export default {
    name: "logManage",
    components: {

    },
    data() {
        return {
            formFileds: {},
            multipleSelection: null,
            tableData: [],
            pageSize: 10,
            pageNum: 1,
            total: "",
            input: "",
            // addShow: false,
            // editShow: false
        }
    },
    methods: {

        handleRowClick(row, event, column) {

            // 仅选中当前行
            this.setCurRowChecked(row);
        },
        handleCheckedAllAndCheckedNone(selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // dialogClose () {

        //     this.addShow = false;
        //     this.editShow = false;
        // },

        rowEdit(index, row) {
            // this.$refs.detailRef.handleEdit('qqqq')

            // //当前选中行
            this.formFileds = row;
            this.editShow = true;
        },

        deleteSelection() {

            if (!this.multipleSelection) {
                this.$message.warning('请至少选择一条数据进行删除！')
                return
            } else {

                this.$confirm('数据将会永久删除，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    // console.log(this.multipleSelection)

                    // delete (array).then(res => {//接口
                    //     console.log(res);
                    //     this.search();//删除完成后初始化查询列表
                    // })

                })
            }
        },
        rowDel(index, row, event) {
            // 让当前删除按钮失焦
            event.target.blur();

            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {

                this.tableData.splice(row.id, 1);
                this.$message.success('删除成功');
                return false;
            });
        },
        get(){
            var par,
            par = {
                input: this.input,
                pageSize:this.pageSize,
                pageNum: this.pageNum ,
            }
            getLog(par).then((res)=>{
                if(res){
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                }
            }
            )
        },
        // 显示当前页
        currentChange(e) {
        this.pageNum = e;
        this.get();
        },
        // 页面显示多少行
        sizeChange(e) {
        this.pageSize = e;
        this.get();
        },
    },
    mounted(){
        this.get();
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
